<template>
    <!-- 遮罩层 -->
    <div v-if="visible"
        class="fixed inset-0 bg-black/50  flex items-center justify-center px-[36px] transition-opacity duration-300 z-[999]"
        :class="visible ? 'opacity-100' : 'opacity-0 pointer-events-none'" @click.self="onClose">
        <!-- 弹窗主体 -->
        <div class="bg-white dark:bg-gray-900 rounded-lg shadow-xl  mx-auto transform transition-all duration-300"
            :class="visible ? 'scale-100' : 'scale-95'">
            <!-- 内容区 -->
            <div class="max-h-[70vh] overflow-y-auto">
                <slot></slot>
            </div>
            <!-- 底部按钮区 -->
            <div v-if="$slots.footer || showDefaultFooter"
                class="p-[24px] border-t box-border dark:border-gray-700 flex justify-end gap-3">
                <slot name="footer">
                    <!-- 默认按钮组 -->
                    <button
                        class="px-4 py-2 bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-800 dark:text-gray-200 rounded transition-colors"
                        @click="onCancel">
                        取消
                    </button>
                    <button class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded transition-colors"
                        @click="onConfirm">
                        确认
                    </button>
                </slot>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { defineProps, defineEmits, ref } from 'vue';

// 定义props
const props = defineProps<{
    // 是否显示弹窗
    visible: boolean;
    // 弹窗标题
    title?: string;
    // 是否显示关闭按钮
    closable?: boolean;
    // 是否显示默认底部按钮
    showDefaultFooter?: boolean;
}>();

// 默认值
// withDefaults(props, {
//     title: '提示',
//     closable: true,
//     showDefaultFooter: true
// });

// 定义事件
const emit = defineEmits<{
    // 关闭弹窗事件
    (e: 'close'): void;
    // 确认事件
    (e: 'confirm'): void;
    // 取消事件
    (e: 'cancel'): void;
}>();

// 关闭弹窗
const onClose = () => {
    emit('close');
};

// 确认按钮
const onConfirm = () => {
    emit('confirm');
};

// 取消按钮
const onCancel = () => {
    emit('cancel');
};
</script>
